<template>
  <panel style="padding: 0" :hideTitle="true">
    <div class="container-two-wrap">
      <el-row class="form-horizontal">
        <el-col :span="24" class="form-wrap">
          <el-form :model="chooseFloorForm" :rules="rules" ref="floorForm"
                   label-width="100px" :label-position="'left'">
 <!--           <el-form-item prop="number" class="item-5">
              <el-input size="small" placeholder="请输入内容" v-model="searchInfo.stage"></el-input>
            </el-form-item>-->

            <el-form-item prop="number" class="item-5">
              <el-input size="small" placeholder="请输入楼栋名称" v-model="searchInfo.floor"></el-input>
            </el-form-item>

            <el-form-item prop="number" class="text-right item-5">
              <el-button type="info" size="small" class="right">搜索</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>

    <el-button type="info" size="small" @click="addHouse">搭建房间</el-button>

    <!--定义楼层-->
    <el-dialog title="定义楼层" :visible.sync="dialogFloorVisible">
      <div style="width:550px;text-align: center;margin:0 auto;">
        <el-row>
          <el-col :span="24" class="form-wrap">
            <el-form :model="houseCreateForm" :rules="rules" ref="batchCreateForm"
                     label-width="100px" :label-position="'left'">
              <el-form-item label="层数" prop="number" class="item-10">
                <el-input v-model="unitInfo.floorNum" size="small"></el-input>
              </el-form-item>
              <el-form-item label="起始层" v-model="unitInfo.startfloor" prop="projectTypes" class="item-10">
                <el-input size="small"></el-input>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="info" size="small" @click="dialogUnitVisible=true;dialogFloorVisible=false">下一步</el-button>
      </div>
    </el-dialog>

    <!--定义单元1-->
    <el-dialog title="定义单元①" :visible.sync="dialogUnitVisible">
      <div style="width:550px;text-align: center;margin:0 auto;">
        <el-row>
          <el-col :span="24" class="form-wrap">
            <el-form :model="houseCreateForm" :rules="rules" ref="batchCreateForm"
                     label-width="100px" :label-position="'left'">
              <el-form-item label="单元数" prop="number" class="item-10">
                <el-input v-model="unitInfo.unitCount" size="small"></el-input>
              </el-form-item>
              <el-form-item label="单元户数" prop="projectTypes" class="item-10">
                <el-input size="small" v-model="unitInfo.unitDoorNumber"></el-input>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="info" size="small" @click="dialogFloorVisible = true;dialogUnitVisible=false">上一步</el-button>
        <el-button type="info" size="small" @click="generateUnit">下一步</el-button>
      </div>
    </el-dialog>

    <!--定义单元2-->
    <el-dialog title="定义单元②" :visible.sync="dialogUnit2Visible">
      <div style="width:401px;text-align: center;margin:0 auto;">
        <el-table
          ref="multipleTable"
          :data="tableData"
          stripe
          border
          tooltip-effect="dark"
          style="width: 100%">
          <el-table-column
            label="单元"
            prop="name"
            width="200">
          </el-table-column>
          <el-table-column
            prop="unitDoorNumber"
            label="户数"
            width="200">
          </el-table-column>
        </el-table>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="info" size="small" @click="dialogFloorVisible = true;dialogUnitVisible=false">上一步</el-button>
        <el-button type="info" size="small" @click="makeHouseList">下一步</el-button>
      </div>
    </el-dialog>

    <!--生成房间-->
    <el-dialog title="生成房间" :visible.sync="dialogHouseInfoVisible">
      <div style="width:550px;text-align: center;margin:0 auto;">
        <houseTable :house-list="houseList"></houseTable>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="info" size="small" @click="dialogUnit2Visible = true;dialogHouseInfoVisible=false">上一步</el-button>
        <el-button type="info" size="small" @click="generateUnit">确认无误，生成房间</el-button>
      </div>
    </el-dialog>
  </panel>
</template>

<script>
  import Panel from "../../components/panel.vue";
  const houseTable = () => import('@/components/houseTable');

  export default {
    components: {
      Panel,
      houseTable
    },
    data() {
      return {
        rules:{},
        searchInfo:{},
        chooseFloorForm:{},
        houseCreateForm:{},
        dialogFloorVisible:false,//楼层显示标志位
        dialogUnitVisible:false,//单元显示标志位
        dialogUnit2Visible:false,
        dialogHouseInfoVisible:false,
        houseInfo:{
          number:''
        },
        unitInfo:{

        },
        tableData:[],
        houseList:[],
        houseId:0
      }
    },
    methods: {
      addHouse(){
        const _this = this;
        _this.dialogFloorVisible = true;
      },
      generateUnit(){
        const _this = this;
        _this.dialogUnitVisible = false;
        for(var i = 0;i<_this.unitInfo.unitCount;i++){
          var k = i+1;
          _this.tableData.push({"name":k+"单元","unitDoorNumber":_this.unitInfo.unitDoorNumber});
        }
        _this.dialogUnit2Visible = true;
      },
      makeHouseList(){
        this.dialogUnit2Visible = false;
        for(let i=1;i<=this.unitInfo.unitCount;i++){
          for(let j=1;j<=this.unitInfo.floorNum;j++){
            for(let k=1;k<=4;k++) {
              let house = {
                id: this.houseId++,
                unitNo: i,
                floorNo: j,
                roomNo: k
              };
              this.houseList.push(house);
            }
          }
        }
        this.dialogHouseInfoVisible = true;
      }
    }
  };
</script>
